<template>
  <div>
    <!-- 新建 -->
    <el-dialog
      title="选择科室"
      :visible.sync="departmentShow"
      :close-on-click-modal="false"
      :append-to-body="true"
      width="1200px"
      top="40px"
      class="add"
      @close="closeAdd"
    >

      <el-table
        ref="goodsTable"
        :data="list"
        size="small"
        :cell-style="$style.cellStyle"
        :header-cell-style="$style.rowClass"
        @row-click="handleRowClick"
        @selection-change="handleSelectionChange"
      >
        <ElTableColumn type="selection" width="50" />
        <ElTableColumn label="科室名称" prop="name" />

      </el-table>
      <pagination
        class="page tc mt10"
        :total="page.total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="getList"
      />

      <div slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="selectGoods">确 定</el-button>
        <el-button size="small" @click="closeAdd">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from '@/components/Pagination';
import { officeList } from '@/api/department';

class Page {
  total = 0;
  pageNum = 1;
  pageSize = 30;
}

export default {
  name: 'AddGoods',
  components: {
    pagination
  },
  props: {
    goodsId: {
      type: Array,
      default() {
        return [];
      }
    },
    yardId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      page: new Page(), // 分页
      list: [],
      departmentShow: true,
      idList: []

    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  mounted() {
    this.getList();
    // console.log(this.yardId);
  },
  activated() { },
  methods: {
    async getList() {
      try {
        const { data } = await officeList({
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
          yardIds: [this.yardId]
        });
        this.list = data.list;
        this.page.total = data.total;
      } catch (e) {
        this.page.total = 0;
        this.list = [];
      }
    },
    closeAdd() {
      this.$emit('closeAdd', false);
    },
    // 改变表格选中状态
    handleSelectionChange(val) {
      console.log(val);
      this.idList = val.map(i => {
        return i;
      });
    },
    handleRowClick(row, column, event) {
      console.log(row, column, event);
      if (this.goodsId.indexOf(row.id) < 0) {
        this.$refs.goodsTable.toggleRowSelection(row);
      }
    },
    selectGoods() {
      this.$emit('goodsList', this.idList);
      this.closeAdd();
    }

  }
};
</script>

<style lang="scss" scoped>
.add {
  ::v-deep.el-dialog {
    height: calc(100vh - 80px);
    overflow-y: auto;
  }
  ::v-deep.el-dialog__body {
    padding: 10px 20px;
  }
}
.dialog-footer {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>
